<style>
    /* 根据字数修改 */
    .layui-form-label {
        width: 120px;
    }

    .layui-form-item .layui-input-inline {
        width: 200px;
    }

    .date-input {
        width: 200px;
    }

    @media screen and (max-width:450px) {
        .layui-form-label {
            width: 90px;
        }

        .layui-form-item .layui-inline {
            margin-bottom: 0px;
        }
    }

    /*  标签风格  */
    .layui-form-checkbox[lay-skin=none]>div:hover,
    .layui-form-radio[lay-skin=none]>div:hover {
        color: #262626 !important;
    }

    .layui-form-radio>.layui-badge,
    .layui-form-checkbox>.layui-badge {
        margin-right: 10px;
        margin-top: 10px;
        padding: 0 15px 0 10px;
        border-radius: 3px;
        height: 32px;
        line-height: 32px;
        border: 1px solid #e2e2e2;
    }

    .layui-form-radio>.lay-skin-tag,
    .layui-form-checkbox>.lay-skin-tag {
        font-size: 13px;
        border-radius: 100px;
    }

    .layui-form-checked>.lay-skin-tag,
    .layui-form-radioed>.lay-skin-tag {
        color: #fff !important;
        background-color: #16b777 !important;
    }


    .layui-form-radio>.lay-skin-green,
    .layui-form-checkbox>.lay-skin-green {
        border-color: rgba(160, 217, 17, .45) !important;
    }

    .layui-form-checked>.lay-skin-green,
    .layui-form-radioed>.lay-skin-green {
        background: rgba(160, 217, 17, .08) !important;
        color: #52c41a !important;
    }

    .layui-form-radio>.lay-skin-blue,
    .layui-form-checkbox>.lay-skin-blue {
        border-color: rgba(0, 127, 255, .45) !important;
    }

    .layui-form-checked>.lay-skin-blue,
    .layui-form-radioed>.lay-skin-blue {
        background: rgba(0, 127, 255, .08);
        color: rgba(0, 127, 255, .85) !important;
    }

    .layui-form-radio>.lay-skin-orange,
    .layui-form-checkbox>.lay-skin-orange {
        border-color: rgba(255, 134, 66, .45) !important;
    }

    .layui-form-checked>.lay-skin-orange,
    .layui-form-radioed>.lay-skin-orange {
        background: rgba(255, 134, 66, .08);
        color: rgba(255, 134, 66, .85) !important;
    }

    .lay-error {
        color: #FF4D4F;
    }
</style>

<div class="layuimini-container layuimini-page-anim">
    <!-- 用于创建子页面 -->
    <div class="page-create"></div>

    <!-- page-main-create -->
    <!-- 用于显示 隐藏 -->
    <div class="layuimini-main page-main-create">

        <div class="layuimini-title title-row">
            <div class="title-left">
                <div class="flex items-center">
                    <h4><span>考勤报表</span></h4>
                    <input type="text" name="datePeriodStart" autocomplete="off" id="date_period"
                        class="layui-input date-input ml-3" placeholder="请选择" />
                </div>
            </div>
            <div class="title-right">
                <span class="title-right-text">
                    <button type="button" class="layui-btn  layui-btn-sm layui-btn-primary ml-3"
                        lay-on="add">显示指标配置</button>
                    <button type="button" class="layui-btn  layui-btn-sm layui-btn-primary ml-3"
                        lay-on="download">导出</button>

                </span>
            </div>
        </div>

        <div class="section">
            <form class="layui-form" action="" lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="search-box-wrapper">
                        <div class="search-box-body">
                            <div class="layui-inline">
                                <label class="layui-form-label">所属组织</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">所属网格</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">考勤状态</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">考勤方式</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">出勤当日职位</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">排班时间(上)</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">排班时间(下)</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择"
                                        name="supplierCodes" lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">班次</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="banci"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">业务类型</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="yewuleix"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">所属部门</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="yewuleix"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">所属部门业务类型</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="yewuleix"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">队长</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">出勤范围</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="yewuleix"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">关联作业网格</label>
                                <div class="layui-input-inline">
                                    <select class="layui-input" lay-append-to="body" placeholder="请选择" name="yewuleix"
                                        lay-search>
                                        <option value="1">行政</option>
                                        <option value="2">客户服务部负责人</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">手机号</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">工牌编号</label>
                                <div class="layui-input-inline">
                                    <input type="text" placeholder="请输入" name="nickname" autocomplete="off"
                                        class="layui-input">
                                </div>
                            </div>


                        </div>
                        <div class="search-box-btns">
                            <div class="switch-wrapper" id="toggleFormBtn">
                                <span>展开</span>
                                <i class="layui-icon layui-icon-down" id="toggleIcon"></i>
                            </div>
                            <button type="submit" class="layui-btn layui-btn-sm" lay-submit
                                lay-filter="data-search-btn">查询</button>
                            <button type="reset" class="layui-btn  layui-btn-sm layui-btn-primary">重置</button>
                        </div>
                    </div>

                    <div class="layui-row mb-5 flex items-end">
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 mt-3">
                            <div class="layui-inline">

                                <input type="radio" name="hobby" value="已设定考勤人数" lay-skin="none" checked>
                                <div lay-radio class="lay-skin-green layui-badge">已设定考勤人数(100)</div>
                                <input type="radio" name="hobby" value="排班人数" lay-skin="none">
                                <div lay-radio class="lay-skin-green layui-badge">排班人数(100)</div>
                                <input type="radio" name="hobby" value="未排班人数" lay-skin="none">
                                <div lay-radio class="lay-skin-green layui-badge">
                                    <span class="lay-error">未排班人数(90)</span>
                                </div>


                                <input type="radio" name="hobby" value="应排班人天" lay-skin="none">
                                <div lay-radio class="lay-skin-blue layui-badge">应排班人天(90)</div>
                                <input type="radio" name="hobby" value="实际排班人天" lay-skin="none">
                                <div lay-radio class="lay-skin-blue layui-badge">实际排班人天(20)</div>
                                <input type="radio" name="hobby" value="未排班人天" lay-skin="none">
                                <div lay-radio class="lay-skin-blue layui-badge">
                                    <span class="lay-error">未排班人天(20)</span>
                                </div>


                                <input type="radio" name="hobby" value="实际排班班次" lay-skin="none">
                                <div lay-radio class="lay-skin-orange layui-badge">实际排班班次(20)</div>
                                <input type="radio" name="hobby" value="常规班次-正常出勤" lay-skin="none">
                                <div lay-radio class="lay-skin-orange layui-badge">常规班次-正常出勤(20)</div>
                                <input type="radio" name="hobby" value="常规班次-请休假" lay-skin="none">
                                <div lay-radio class="lay-skin-orange layui-badge">
                                    <span class="lay-error">常规班次-请休假(20)</span>
                                </div>
                                <input type="radio" name="hobby" value="常规班次-异常出勤" lay-skin="none">
                                <div lay-radio class="lay-skin-orange layui-badge">常规班次-异常出勤(20)</div>

                            </div>
                        </div>
                        <div class="layui-col-xs12 layui-col-sm6 layui-col-md6 mt-3">
                            <div class="popover-style-wrapper t-r">
                                <div class="popover-style t-r">
                                    <section class="tit">
                                        <span class="layui-font-gray pr-5"> 排班率：
                                            <span class="layui-font-black ">100.00%</span>
                                        </span>
                                        <span class="layui-font-gray">出勤率：
                                            <span class="layui-font-black">82.66%</span>
                                        </span>
                                    </section>
                                </div>
                                <div class="flex justify-end">
                                    <span class="layui-font-gray pr-5">仅看计时积分工单出勤记录 </span>
                                    <span class="layui-font-black pr-5">
                                        <input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest"
                                            title="开|关" />
                                    </span>

                                    <span class="layui-font-gray  pr-5">
                                        工时完成率：
                                        <span class="layui-font-black">82.74%</span>
                                    </span>


                                    <span class="layui-font-gray pr-5">有效出勤工时：
                                        <span class="layui-font-black">1134.27</span>h
                                    </span>


                                    <span class="layui-font-gray">实际排班工时：</span>
                                    <span class="layui-font-black pr-5">1134.27</span>

                                    <i class="layui-icon layui-icon-tips layui-font-grey" lay-on="question_tips"></i>



                                </div>
                            </div>
                        </div>
                    </div>



                </div>
            </form>

              <div class="table-stripe">
            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
        </div>
        </div>





      
        <script type="text/html" id="currentTableBar">
            <a class="layui-font-blue mr-3" lay-event="guiji">轨迹</a>
            <a class="layui-font-blue mr-3" lay-event="detail">详情</a>
        </script>

        <script type="text/html" id="templet_username">
            <div class="flex avatar-wrapper">
                <div class="avatar flex-center">
                    <span>{{d.classify.slice(-2)}}</span>
                </div>
                <div class="pl-2 flex-1 rl-ellipsis" style="line-height: 20px;">
                    <div class="layui-font-black text-left font-weight">
                        {{d.classify}}
                    </div>
                    <div :title="d.userType" class="layui-font-gray layui-font-12">
                        {{d.sign}}
                    </div>
                </div>
            </div>
        </script>
    </div>
</div>
<script>
    layui.use(['form', 'table', 'tabs', 'miniPage', 'miniDate', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            tabs = layui.tabs,
            laydate = layui.laydate,
            layer = layui.layer,
            util = layui.util,
            element = layui.element,
            miniDate = layui.miniDate,
            miniPage = layui.miniPage;
        /******************** 事件 start ********************/

        util.on('lay-on', {

            // 问号事件
            'question_tips': function () {
                layer.tips(`<img src="/assets/images/workforce/attendanceBoard.png" width="540px">`, this, {
                    tips: [1, '#ffffff'],
                    area: ['550px', 'auto']
                });
            },

            //新增
            'add': function () {
                var content = miniPage.getHrefContent('page/table/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '新增班次',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['800px', 'auto'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
        })
        /******************** 事件 end ********************/



        /******************** 渲染组件 start ********************/
        form.render();
        form.render('select'); //刷新select选择框渲染
        // 初始化日期范围选择器
        laydate.render({
            elem: '#date_period',
            range: true,
            // format: 'yyyy-MM-dd',
            value: miniDate.getCurrentMonthRange().start + ' - ' + miniDate.getCurrentMonthRange().end, // 默认当月
            done: function (value, date, endDate) {
                console.error('done======')
                console.log(value); // 日期字符，如： 2017-08-18
                console.log(date); // 包含年月日时分秒各项值的对象
                console.log(endDate); // 结束日期时间对象，当设置 range 时才会返回。对象成员同上。
            }
        });
        /******************** 渲染组件 end ********************/

        table.render({
            elem: '#currentTableId',
            url: 'api/table.json',

            cols: [[
                { field: 'time', minWidth: 120, fixed: 'left', title: '日期' },
                { field: 'username', width: 140, title: '姓名', fixed: 'left', templet: '#templet_username' },
                { field: 'score', minWidth: 80, title: '职位' },
                { field: 'classify', minWidth: 80, title: '考勤方式' },
                { field: 'city', minWidth: 80, title: '业务类型' },
                { field: 'wealth', minWidth: 135, title: '是否有排班' },
                { field: 'time', minWidth: 150, title: '实际排班班次' },
                { field: 'time', minWidth: 150, title: '排班时间(不含休息时间)' },
                { field: 'businessNames', minWidth: 135, title: '排班时长(h)' },
                { field: 'time', minWidth: 135, title: '实际出勤时间' },
                { field: 'time', minWidth: 135, title: '打卡时长(h)' },
                { field: 'time', minWidth: 135, title: '有效出勤工时(h)' },
                { field: 'time', minWidth: 135, title: '是否出勤' },
                { field: 'time', minWidth: 135, title: '考勤状态' },
                { field: 'time', minWidth: 135, title: '工牌编号' },
                { field: 'time', minWidth: 135, title: '出勤范围' },
                { field: 'time', minWidth: 135, title: '关联作业网格' },
                { field: 'time', minWidth: 135, title: '所属组织' },
                { field: 'time', minWidth: 135, title: '所属部门' },
                { field: 'time', minWidth: 135, title: '所属部门业务类型' },
                { field: 'time', minWidth: 135, title: '网格名称' },
                { field: 'time', minWidth: 135, title: '队长' },
                { field: 'time', minWidth: 135, title: '备注' },
                { title: '操作', minWidth: 120, toolbar: '#currentTableBar', fixed: 'right', align: "center" }

            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            skin: 'grid',
            size: 'lg'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            //执行搜索重载
            table.reload('currentTableId', {
                page: {
                    curr: 1
                }
                , where: {
                    searchParams: result
                }
            }, 'data');

            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                var content = miniPage.getHrefContent('page/table/add.html');
                var openWH = miniPage.getOpenWidthHeight();

                var index = layer.open({
                    title: '添加用户',
                    type: 1,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
            console.log(obj)
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            console.log('tool(currentTableFilter)====', obj)
            if (obj.event === 'guiji') {
                var content = miniPage.getHrefContent('page/components/trackMap.html');
                var openWH = miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '吴征巡查/安全',
                    type: 1,
                    shade: 0.5,
                    maxmin: false,
                    shadeClose: true,
                    success: function (layero, index) {
                        layer.full(index); // 最大化
                    },
                    area: ['100%', openWH[1] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('确认删除吗', function (index) {
                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === 'detail') {  // 监听详情操作
                miniPage.renderPageCreate(`page/laborOperations/laborJobManager/components/planDetail.html?id=${data.id}`)
            }
        });

        // 开启监听 折叠展开事件
        miniPage.listen()

    });
</script>